<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/layui.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/layui.js"></script>
</head>
<body>
<nav class="index_nav w">
    <img src="image/user_info_03.png" alt=""/>
    <div class="index_hello">你好，米花</div>
    <div class="index_memberNum">会员号：16607</div>
</nav>
<header class="index_header">
    <div class="w">
        <div class="index_logo">
            <img src="image/logo.png" alt=""/>
            <img src="image/logo_info.png" alt=""/>
        </div>
        <div class="index_navigation">
            <ul>
                <li><a href="">数据库首页</a></li>
                <li class="active"><a href="">会员首页</a></li>
                <li><a href="">个人中心</a></li>
                <li><a href="">网站消息(<span style="color: red">1</span>)</a></li>
                <li><a href="">退出</a></li>
            </ul>
        </div>
    </div>
</header>
<section class="index_content">
    <div class="w">
        <div class="index_content_left">
            <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;padding: 20px 0;">
                <li class="layui-nav-item">
                    <a href=""><img src="image/1.png" alt=""/>犬籍注册 <span style="color: #999999;font-size: 15px;margin-left: 10px">快速注册犬籍</span></a>
                    <!--<dl class="layui-nav-child">-->
                    <!--<dd><a href="javascript:;">选项一</a></dd>-->
                    <!--<dd><a href="javascript:;">选项二</a></dd>-->
                    <!--<dd><a href="javascript:;">选项三</a></dd>-->
                    <!--<dd><a href="">跳转项</a></dd>-->
                    <!--</dl>-->
                </li>
                <li class="layui-nav-item ">
                    <a href="javascript:;"><img src="image/2.png" alt=""/>血统申请<span class="layui-nav-more" ></span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="">配种申请</a></dd>
                        <dd><a href="">血统申请</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href=""><img src="image/3.png" alt=""/>犬只变更</a></li>
                <li class="layui-nav-item"><a href=""><img src="image/4.png" alt=""/>外籍换发</a></li>
                <li class="layui-nav-item"><a href="javascript:;"><img src="image/5.png" alt=""/>年审<span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="">xxx</a></dd>
                        <dd><a href="">xxx</a></dd>
                    </dl>
                </li>
                <span class="layui-nav-bar" style="top: 22.5px; height: 0px; opacity: 0;"></span></ul>
        </div> 
        <!--index-content_item-->
        <div class="index-content_right breeding clear">
            <div class="breed_top">
                <img src="image/top1.png" alt=""/>
            </div>
            <div class="breeding_item">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">配种时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" lay-key="1">
                        </div>
                        <button class="layui-btn">查询</button>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">种公</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="输入芯片号" class="layui-input">
                        </div>
                        <button class="layui-btn">查询</button>
                    </div>
                </form>
            </div>
            <div class="breeding_item">
                <div class="layui-form">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>品种</th>
                            <th>犬名</th>
                            <th style="width: 10%;">性别</th>
                            <th>犬主姓名</th>
                            <th>毛色</th>
                            <th>出生日期</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>XXXX犬</td>
                            <td>保罗</td>
                            <td>女</td>
                            <td>许珊</td>
                            <td>白色</td>
                            <td>2017-12-19</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="breeding_item">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">种母</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="输入芯片号" class="layui-input">
                        </div>
                        <button class="layui-btn">查询</button>
                    </div>
                </form>
            </div>
            <div class="breeding_item">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>品种</th>
                        <th>犬名</th>
                        <th style="width: 10%;">性别</th>
                        <th>犬主姓名</th>
                        <th>毛色</th>
                        <th>出生日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>XXXX犬</td>
                        <td>保罗</td>
                        <td>女</td>
                        <td>许珊</td>
                        <td>白色</td>
                        <td>2017-12-19</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="breeding_item breeding_Privacy">
                <div class="breeding_Privacy_item1">
                    <p>隐私属性</p>
                    <span>上传种公芯片扫码及运动状态视频</span>
                </div>
                <div class="breeding_Privacy_item2">
                    <label for="uploadPrivacy"></label>
                    <input type="file" id="uploadPrivacy" style="display: none"/>
                </div>
            </div>
            <div class="breeding_item" style="text-align: center;margin-bottom: 30px">
                <button class="layui-btn layui-btn-lg" style="padding: 0 70px;background-color:#fb8b48;">确认</button>
            </div>
        </div>
    </div>
</section>
<footer class="inex_footer">
    <div>版权所有：中国工作犬管理协会　苏ICP备05081624号</div>
    <div>地址： 南京市雨花台区小行路18号　邮编：210012　电话： (025)025-52881386　传真：(025)52403303 </div>
    <div>网站保留所有权利，未经允许不得复制、镜像 </div>
</footer>
</body>
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)

        });
    });
</script>
</html>